import React from "react";

export default class LearnMap extends React.Component {
  /**
   * 所有的数据都放state里面
   */
  state = {
    arr: [
      {
        name: "张三",
        age: 20,
      },
      {
        name: "李四",
        age: 25,
      },
      {
        name: "王五",
        age: 30,
      },
    ],
  };

  addUser() {
    this.setState({
      arr: [...this.state.arr, { name: "王凯", age: 18 }],
    });
  }

  render() {
    return (
      <div>
        <div>你好，。我是map</div>
        <div>
          {/* 
            使用map进行列表渲染
            map返回要渲染的列表

            使用箭头函数 可以 直接return 但是要注意加括号
            并且 括号内只能 有一个根元素
          
          */}
          =
          {this.state.arr.map((item, index) => (
            // 循环的时候必须要加key，要在最上层的元素加
            <div key={index}>
              {/* 
                map return 也是jsx
                那么在jsx里面 要写变量的话
                必须要使用{}
              
              */}
              {item.name}--{item.age}
            </div>
          ))}
        </div>
        <button onClick={() => this.addUser()}>添加信息</button>
      </div>
    );
  }
}
